<template>
  <a-table
    :columns="columns"
    :data-source="list"
    :row-selection="rowSelection"
  />
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, ref } from "vue";
import CategoryType from "../type/CategoryType";
import api from "../http/api";
export default {
  setup() {
    const columns = [
      {
        title: "分类",
        dataIndex: "label",
        key: "label",
      },
      {
        title: "值",
        dataIndex: "value",
        key: "value",
      },
    ];
    const state = reactive<{ list: Array<CategoryType> }>({
      list: [],
    });
    onMounted(async () => {
      const result = await api.category.getAllCategoryApi();
      console.log(result.data.data);
      state.list = result.data.data;
    });
    const rowSelection = ref({
      checkStrictly: false,
      onChange: (
        selectedRowKeys: (string | number)[],
        selectedRows: CategoryType[]
      ) => {
        console.log(
          `selectedRowKeys: ${selectedRowKeys}`,
          "selectedRows: ",
          selectedRows
        );
      },
      onSelect: (
        record: CategoryType,
        selected: boolean,
        selectedRows: CategoryType[]
      ) => {
        console.log(record, selected, selectedRows);
      },
      onSelectAll: (
        selected: boolean,
        selectedRows: CategoryType[],
        changeRows: CategoryType[]
      ) => {
        console.log(selected, selectedRows, changeRows);
      },
    });
    return {
      ...toRefs(state),
      columns,
      rowSelection
    };
  },
};
</script>

<style>
</style>